<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import VideoComp from './video-comp.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/4/img-src'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'
import { useIntersectionObserver } from '@vueuse/core'

const { scrollGroup } = useScrollGroup()

const active = ref<1 | 2 | 3>(1)

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')
const videoWrapRef = useTemplateRef<HTMLDivElement | null>('videoWrapRef')
useIntersectionObserver(videoWrapRef, ([{ isIntersecting }]) => {
  if (!isIntersecting) {
    const video = videoWrapRef.value?.querySelector('& > div video') as HTMLVideoElement | null
    if (video) {
      video.pause()
      video.currentTime = 0
    }
  }
})

useGsapContext(() => {
  if (!containerRef.value || !videoWrapRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: containerRef.value,
    start: 'top center',
    end: 'bottom center',
    onToggle: async (self) => {
      const video = videoWrapRef.value?.querySelector(`& > div video`) as HTMLVideoElement | null

      if (self.isActive && video) {
        await video.play().catch()
      }
    },
    invalidateOnRefresh: true,
    ...scrollGroup,
  })
})

const itemChange = (key: 1 | 2 | 3) => {
  active.value = key
}

const src = getImgSrc('videos-live-1-c1-1-pc.mp4')
</script>

<template>
  <div
    ref="containerRef"
    class="mt-[3.5rem] bg-[#201f1c] rounded-sm px-[5.6vw] py-[6.56vw] md:mt-[3rem] md:p-[1.5rem]"
  >
    <div class="text-3xl leading-[1.26]">
      <p>4K 视频转实况照片</p>
      <p>
        帧帧都 4K <br class="md:hidden" />
        更有生命力
      </p>
    </div>

    <div class="mt-[1.75rem] md:mt-[1.5rem]">
      <div ref="videoWrapRef">
        <keep-alive>
          <video-comp
            v-if="active === 1"
            :src
            text="原生 4K HDR 画质，从容截取黄金三秒。小红书分享高清又高光，美妙不打折。"
          />
          <video-comp
            v-else-if="active === 2"
            :src
            text="慢动作视频的一瞬，用实况照片轻松分享，小照片刻画大乾坤。"
          />
          <video-comp v-else :src text="希区柯克变焦的大片，用实况照片轻松分享，故事感一眼入迷。" />
        </keep-alive>
      </div>

      <div class="w-max mx-auto">
        <ul class="flex gap-[5.58vw] mt-[1.5rem] justify-center relative z-1 md:text-sm">
          <li
            class="pb-[0.5rem] opacity-55 cursor-pointer"
            :class="{ active: active === 1 }"
            @click="itemChange(1)"
          >
            超鲜活画质
          </li>
          <li
            class="pb-[0.5rem] opacity-55 cursor-pointer"
            :class="{ active: active === 2 }"
            @click="itemChange(2)"
          >
            想变得有趣
          </li>
          <li
            class="pb-[0.5rem] opacity-55 cursor-pointer"
            :class="{ active: active === 3 }"
            @click="itemChange(3)"
          >
            还能再有趣
          </li>
        </ul>
        <div class="-translate-y-px" style="border-bottom: 1px solid #3c3c3cff"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.active {
  border-bottom: 1px solid #fff;
  opacity: 1;
}
</style>
